<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类管理 - 校园失物招领系统</title>
    <link rel="stylesheet" href="/css/common.css">
</head>
<body>
    <div class="container">
        <nav class="navbar">
            <div class="nav-left"><h1>校园失物招领系统</h1></div>
            <div class="nav-right">
                <span id="username"></span>
                <a href="/notifications" class="nav-link">通知 <span id="unreadCount" class="badge"></span></a>
                <a href="/profile" class="nav-link">个人中心</a>
                <a href="javascript:void(0)" onclick="logout()" class="nav-link">退出</a>
            </div>
        </nav>

        <div class="main-content">
            <div class="sidebar">
                <a href="/home" class="menu-item">首页</a>
                <a href="/lost" class="menu-item">失物信息</a>
                <a href="/found" class="menu-item">招领信息</a>
                <a href="/lost/publish" class="menu-item">发布失物</a>
                <a href="/found/publish" class="menu-item">发布招领</a>
                <a href="/my/lost" class="menu-item">我的失物</a>
                <a href="/my/found" class="menu-item">我的招领</a>
                <a href="/claims/sent" class="menu-item">发出的认领</a>
                <a href="/claims/received" class="menu-item">收到的认领</a>
                <a href="/favorites" class="menu-item">我的收藏</a>
                <div id="adminMenu">
                    <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;">
                        <a href="/admin/users" class="menu-item">用户管理</a>
                        <a href="/admin/categories" class="menu-item active">分类管理</a>
                    </div>
                </div>
            </div>

            <div class="content">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
                    <h2 style="margin:0;">分类管理</h2>
                    <button class="btn" onclick="showAddDialog()">添加分类</button>
                </div>

                <div class="section">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>分类名称</th>
                                <th>图标</th>
                                <th>排序</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="categoryList"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="categoryDialog" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:30px; border-radius:10px; width:500px;">
            <h3 id="dialogTitle">添加分类</h3>
            <form id="categoryForm">
                <div class="form-group">
                    <label>分类名称*</label>
                    <input type="text" id="name" required>
                </div>
                <div class="form-group">
                    <label>图标</label>
                    <input type="text" id="icon" placeholder="图标名称">
                </div>
                <div class="form-group">
                    <label>排序</label>
                    <input type="number" id="sort" value="0">
                </div>
                <div class="form-group">
                    <label>状态</label>
                    <select id="status">
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn">保存</button>
                    <button type="button" class="btn btn-secondary" onclick="hideDialog()">取消</button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        loadUser();
        loadUnreadCount();

        let editingId = null;

        loadCategories();

        function loadCategories() {
            $.get('/api/category/all', function(res) {
                if (res.code === 200) {
                    const html = res.data.map(cat => `
                        <tr>
                            <td>${cat.id}</td>
                            <td>${cat.name}</td>
                            <td>${cat.icon || '-'}</td>
                            <td>${cat.sort}</td>
                            <td>
                                <span class="status-badge status-${cat.status === 1 ? '1' : '2'}">
                                    ${cat.status === 1 ? '启用' : '禁用'}
                                </span>
                            </td>
                            <td>${formatDate(cat.createdAt)}</td>
                            <td>
                                <button class="btn" onclick='editCategory(${JSON.stringify(cat)})'>编辑</button>
                                <button class="btn btn-danger" onclick="deleteCategory(${cat.id})">删除</button>
                            </td>
                        </tr>
                    `).join('');
                    $('#categoryList').html(html);
                }
            });
        }

        function showAddDialog() {
            editingId = null;
            $('#dialogTitle').text('添加分类');
            $('#categoryForm')[0].reset();
            $('#categoryDialog').show();
        }

        function editCategory(cat) {
            editingId = cat.id;
            $('#dialogTitle').text('编辑分类');
            $('#name').val(cat.name);
            $('#icon').val(cat.icon);
            $('#sort').val(cat.sort);
            $('#status').val(cat.status);
            $('#categoryDialog').show();
        }

        function hideDialog() {
            $('#categoryDialog').hide();
            editingId = null;
        }

        $('#categoryForm').on('submit', function(e) {
            e.preventDefault();
            
            const data = {
                name: $('#name').val(),
                icon: $('#icon').val(),
                sort: $('#sort').val(),
                status: $('#status').val()
            };

            if (editingId) {
                $.ajax({
                    url: '/api/category/' + editingId,
                    type: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(res) {
                        if (res.code === 200) {
                            hideDialog();
                            loadCategories();
                        } else {
                            alert(res.message);
                        }
                    }
                });
            } else {
                $.ajax({
                    url: '/api/category',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(res) {
                        if (res.code === 200) {
                            hideDialog();
                            loadCategories();
                        } else {
                            alert(res.message);
                        }
                    }
                });
            }
        });

        function deleteCategory(id) {
            if (confirm('确定要删除该分类吗？')) {
                $.ajax({
                    url: '/api/category/' + id,
                    type: 'DELETE',
                    success: function(res) {
                        if (res.code === 200) {
                            loadCategories();
                        } else {
                            alert(res.message);
                        }
                    }
                });
            }
        }
    </script>
</body>
</html>


